﻿
<template>
  <div class="Detail_Excahnge_contain" ref="Detail_Excahnge_contain">
    <div class="Detail_header">
      官方兑换
      <!--<div class="Detail_goBack" v-on:click="hide_detail">
        <img src="../../static/img/goback_detail.png">
      </div>-->
    </div>
    <div class="top_nav_Scroll">
      <Detail img="list_d.images" :childMsg="img_list_test"></Detail>
    </div>
    <div class="div_middle clearfix">
      <div class="div_middle_left">
        积分 <span>{{list_d.integral}}</span>
      </div>
      <img src="../../static/img/nav_fenhao.png" alt="Alternate Text" class="fenhao_img" v-on:click="show_alert"/>
      <div class="div_middle_right">获赞数 {{list_d.maxPoint}}</div>
    </div>
    <div class="wrap_iscroll_view">
      <scroller class="clearfix">
        <div class="Exchange_ok clearfix" style="position:relative;color:#c77b48;font-size:0.75rem;text-align:center;width:100%;height:1.1rem;line-height:1.1rem;">
          <div class="Exchange_ok_before base_Exchange" style="width:30vw;height:2px;background-color:#9f5c2f;position:absolute;top:50%;left:5vw;">

          </div>
          可兑换{{list_d.optionalDelivery}}
          <div class="Exchange_ok_after base_Exchange" style="width:30vw;height:2px;background-color:#9f5c2f;position:absolute;top:50%;right:5vw;">

          </div>
        </div>
        <div class="Exchange_tj" v-show="condition" style="height:2.25rem;width:84vw;margin:auto;border:1px dashed #9f5c2f;margin-top:0.2rem;font-size:0.7rem;line-height:1.4;text-align:left;padding-left:4vw;padding-top:0.4rem;color:#9f5c2f;display:flex">
          <div>兑换条件:</div>
          <!--获赞数大于888<br/>
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;每人每天限兑换1次-->
          <div v-html="list_d.condition"></div>
        </div>
        <div class="inner_story_bottom_title">{{list_d.postName}}</div>
        <div class="inner_story_list" v-html="list_d.postContent">
          <!--<p>诗经123456</p>
          <p>
            诗经》是中国古代诗歌开端
          </p>
          <p> 最早的一部诗歌总集。</p>
          <p> 诗经收集了西周初年至春秋中叶</p>
          <p>（前11世纪至前6世纪）的诗歌，</p>
          <p>共311篇，其中6篇为笙诗，即只有标题，</p>
          <p>没有内容，称为笙诗六篇</p>
          <p>诗经收集了西周初年至春秋中叶</p>
          <p>（前11世纪至前6世纪）的诗歌，</p>
          <p>共311篇，其中6篇为笙诗，即只有标题，</p>
          <p>没有内容，称为笙诗六篇.</p>
          <p> 诗经收集了西周初年至春秋中叶</p>
          <p>（前11世纪至前6世纪）的诗歌，</p>
          <p>共311篇，其中6篇为笙诗，即只有标题，</p>
          <p>没有内容，称为笙诗六篇</p>
          <p>诗经收集了西周初年至春秋中叶</p>
          <p>（前11世纪至前6世纪）的诗歌，</p>
          <p>共311篇，其中6篇为笙诗，即只有标题，</p>
          <p>没有内容，称为笙诗六篇.</p>
          <p class="bottom_10">&nbsp;</p>
          <p class="bottom_10">&nbsp;</p>-->
        </div>
  </scroller>
  </div>
  <div class="Detail_bottom">
    <div class="d_b_f pad_l_5">
      <img src="../../static/img/my_exchange_good.png" class="my_exchange_good ">
      <span class="num_b"> 689</span>
    </div>
    <div class="d_b_f">
      <img src="../../static/img/my_gift_tale.png" class="my_exchange_good">
      <span class="num_b"> 689</span>
    </div>
    <div class="d_b_f">
      <img src="../../static/img/my_gift_last.png" class="my_exchange_good">
      <span class="num_b"> 689</span>
    </div>
    <div class="certain_btn_d" v-on:click="show_mask">
      兑换
    </div>
  </div>
   <div class="show_box_mask" v-show="mask_show" v-on:click.self="mask_hide">
     <div class="show_box">
        <div class="show_box_header">
          <p>我的积分：{{user_msg.integral}}</p>
          <!--<p class="cz_btn">充值</p>-->
        </div>
        <div class="show_box_main">
          <p class="show_box_main_title">
            兑换数量
          </p>
          <div class="wrap_count">
            <div class="count_p" v-on:click="plus">+</div>
            <div class="count_show">{{count}}</div>
            <div class="count_r" v-on:click="reduce">-</div>
          </div>
        </div>
        <div class="show_box_bottom">
          <p class="need_fen">所需积分{{need_count}}</p>
          <p class="certain_btn_show_box" v-on:click="certain_btn_mess">确认</p>
        </div>
     </div>

   </div>
  </div>

</template>

<script>
  import {mapState, mapMutations,mapActions,mapGetters} from 'vuex';
  //limit_Scroll
  import limit_scroll from "../../static/js/limit_scroll.js"
  import Detail from "./scroll_view/Detail_nav.vue"
  import { Toast, Indicator, MessageBox } from 'mint-ui';
  import qs from 'qs';
  import common from "../common/common.js"
export default {
  name: 'Detail_Exchange',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      show_layer:false,
      get_layer_show: this.$store.getters.get_layer_show,
      list_d: "",
      count: 0,
      need_count: 0,
      mask_show: false,
      content_wenh: "",
      img_list: {
        list:[]
      },
      img_list_test: {
        list:[1,1,1]
      },
      PostId: "",
      user_msg: "",
      condition:false
    }
  },
  beforeCreate: function () {
    //Indicator.open();
    //let id = location.href.split("id=")[1];
    //this.PostId = id
    //this.$http.all([
    //  this.$http.get('/api/user/getUserById?id=' + sessionStorage.getItem("user_id")),
    //  this.$http.get('/api/user/tokenExchange/getOfficialpostById?id=' + id)
    //])
    //.catch((thrown) => {
    //    Indicator.close();
    //    Toast({
    //      message: '网络出错',
    //      position: 'bottom',
    //      duration: 2000
    //    });
    //}).then(this.$http.spread((user_msg, offical) => {
    //    // 上面两个请求都完成后，才执行这个回调方法
    //    Indicator.close();
    //    console.log(offical)
    //    this.user_msg = user_msg
    //    this.list_d = offical.data;
    //  }))
  },
  ...mapMutations([
    "header_scroll_nav"
  ]),
  mounted: function () {
    common.is_app(this)
    //let id = location.href.split("id=")[1];
    //this.PostId = id;
    Indicator.open();
    let id = sessionStorage.getItem("off_post_id")
    this.$http.all([
      this.$http.get(this.base_url+'/yizhiweimen/api/user/tokenExchange/getOfficialpostById?id=' + id)
    ])
    .catch((thrown) => {
        Indicator.close();
        Toast({
          message: '网络出错',
          position: 'bottom',
          duration: 2000
        });
      }).then(this.$http.spread((offical) => {
        // 上面两个请求都完成后，才执行这个回调方法
        Indicator.close();
        console.log("+++++++++++++++++++++++++++++++++++1111111111111111112222222222222")
        console.log(offical.data)
        let img = offical.data.images;
        img = img.split(",")
        offical.data.images = img
        console.log("+++++++++++++++++++++++++++++++++++++")
        console.log(offical.data.images)
        this.img_list_test = offical.data
        //this.header_scroll_nav(offical.data)
        this.$store.commit('header_scroll_nav', offical.data)
        this.list_d = offical.data
       // console.log(this.get_header_scroll_nav());
        //this.swiperSlides = offical.data
        //this.header_scroll_nav(offical.data)
        //setInterval(() => {
        //  //console.log('simulate async data')
        //  let swiperSlides = offical.data
        //  if (swiperSlides.length < 10) swiperSlides.push(swiperSlides.length + 1)
        //}, 3000)
      }))
  },
  methods: {
    certain_btn_mess: function () {
      let user_id = sessionStorage.getItem("user_id");
      if (this.count == 0) {
        Toast({
          message: '兑换数量为0',
          position: 'bottom',
          duration: 2000
        });
        return;
      } else if (user_id=="") {
        Toast({
          message: '用户id为空',
          position: 'bottom',
          duration: 2000
        });
        return;
      }

     // alert(this.this.$store.getters.set_wx_user_id)
      Indicator.open();
      this.$http.post(this.base_url+'/yizhiweimen/api/user/tokenExchange/exchangePost',
        qs.stringify(
          {
            'user.id': user_id,
            'officialpost.id': this.PostId,
            quantity: this.count
          })
      )
      .then((e) => {
          // 上面两个请求都完成后，才执行这个回调方法
          Indicator.close();
          this.mask_show = false;
          Toast({
            message: e.data,
            position: 'bottom',
            duration: 2000
          });
        })
    },
    show_alert: function () {

      // MessageBox.alert(this.list_d.condition, '提示');
      this.condition = !this.condition;
    },
    plus: function () {
      this.count += 1;
      this.need_count = this.list_d.integral * this.count;
    },
    reduce: function () {
      if (this.count == 0) return;
      this.count -= 1;
      this.need_count = this.list_d.integral * this.count;
    },
    hide_detail: function () {
      window.removeEventListener('popstate', function () {
        history.pushState(null, null, document.URL);
      });
      this.$emit('hide_detail')
    },
    show_mask: function () {
      this.mask_show = true
    },
    mask_hide: function () {
      this.mask_show = false;
    }
  },
  components: {
    Detail
  }
}
</script>

<style scoped>
  .show_box_bottom{
    font-size:0.8rem;
    display:flex;
    justify-content:space-between;
    margin-top:0.9rem;
  }
  .certain_btn_show_box {
    padding: 0.35rem 6vw;
    margin-right: 5%;
    background-color: #e54d4c;
    text-align:center;
    color:#fff;
    font-size:0.7rem;
    border-radius:1vw;
    margin-top:-0.2em;
  }
  .need_fen {
    color: #c97b3d;
    margin-left: 5%;
  }
  .show_box_main {
    border-bottom: 1px solid #d5d5d5;
    padding-bottom: 1.95rem;
  }
  .wrap_count div {
    text-align: center;
    height: 1.5rem;
    line-height: 1.5rem;
  }
  .wrap_count div:nth-child(1) {
    border-right: 2px solid #c36b2b;
    width:6vw;
  }
  .wrap_count div:nth-child(3) {
    width: 6vw;
    border-left: 2px solid #c36b2b;
  }
  .wrap_count div:nth-child(2) {
    width: 16vw;

  }
  .wrap_count {
    border-radius:1vw;
    width: 30vw;
    border: 2px solid #c36b2b;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
  }
  .show_box_main_title {
    color: #c57337;
    font-size: 0.8rem;
    margin-top: 0.75rem;
    margin-bottom: 1.2rem;
    font-weight: 600;
  }
  .show_box_header {
    height: 1.85rem;
    line-height: 1.85rem;
    background-color: #f38001;
    font-size: 1rem;
    color: #fff;
    border-radius: 2vw 2vw 0 0;
  }
  .cz_btn {
    float:right;
    margin-right:5%;
    height:1rem;
    line-height:1rem;
    text-align:center;
    padding:0 2%;
    border:1px solid #fff
  }
  .show_box_mask {
    height: 100%;
    width: 100%;
    background-color: rgba(0,0,0,0.6);
    position: absolute;
    top: 0;
    left: 0;
    z-index:1000;
  }
  .show_box {
    margin: 3.75rem auto 0;
    width: 88%;
    height: 10.85rem;
    background-color: #fff;
    border-radius: 2vw;
    z-index: 999;
  }
  .pad_l_5 {
    padding-left: 5%;
  }
  .certain_btn_d {
    text-align:center;
    line-height:2.6;
    color:#fff;
    width: 35%;
    height: 100%;
    background-color: #e54d4c;
  }
  .num_b {
    vertical-align: bottom;
    line-height: 1;
    margin-top: 0.3rem;
  }
  .d_b_f {
    margin-top: 0.67rem;
    width: 13.3%;
    font-size: 0.7rem;
    color: #b4b4b4;
    display: flex;
    justify-content: space-between
  }
  .my_exchange_good {
    width: 5.7vw;
    display: block;
    height: 1rem;
  }
  .Detail_bottom {
    display: flex;
    justify-content: space-between;
    position: fixed;
    bottom: 0;
    width: 100%;
    background-color: #fff;
  }
  .scroll-view {
    /* -- Attention: This line is extremely important in chrome 55+! -- */
    touch-action: none;
    /* -- Attention-- */
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: hidden;
  }
  .wrap_iscroll_view {

    position: relative;
    height: 14rem;
  }
  .bottom_10 {
    margin-bottom: 0.75rem;
  }
  .Detail_bottom {
    height: 2.5rem;
    box-shadow: 0 -2px 8px 1px rgba(128, 128, 128, 0.13);
  }
  .fade-enter-active, .fade-leave-active {
    transition: opacity .5s
  }

  .fade-enter, .fade-leave-to /* .fade-leave-active in below version 2.1.8 */ {
    opacity: 0
  }
  /*story_bottom_title*/
  .inner_story_bottom_title {
    width: 30%;
    margin: 0 auto;
    margin-top: 0.7rem;
    margin-bottom: 0.9rem;
    position: relative;
    color: #9f5c2f;
    font-size:1rem;
    display:block;
  }
  .inner_story_bottom_title:after {
    content: " ";
    display: block;
    width: 0.3rem;
    height: 0.3rem;
    border-radius: 50%;
    background-color: #9f5c2f;
    position: absolute;
    top: 50%;
    left: 0%;
    transform:translateY(-50%)
  }
  .inner_story_bottom_title:before {
    content: " ";
    display: block;
    width: 0.3rem;
    height: 0.3rem;
    border-radius: 50%;
    background-color: #9f5c2f;
    position: absolute;
    top: 50%;
    right:0%;
    transform: translateY(-50%)
  }
  /*scroll s*/
  body {
    /* On modern browsers, prevent the whole page to bounce */
    overflow: hidden;
  }

  #wrapper2 {
    position: relative;
    width: 100%;
    height: 12rem;
    overflow: hidden;
    /* Prevent native touch events on Windows */
    -ms-touch-action: none;
    /* Prevent the callout on tap-hold and text selection */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    /* Prevent text resize on orientation change, useful for web-apps */
    -webkit-text-size-adjust: none;
    -moz-text-size-adjust: none;
    -ms-text-size-adjust: none;
    -o-text-size-adjust: none;
    text-size-adjust: none;
  }
  .inner_story_list {
    font-size: 0.7rem;
    color: #b16a3b;
    line-height:2;
  }
  #scroller2 {
    width: 100%;
    position: absolute;
    /* Prevent elements to be highlighted on tap */
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    /* Put the scroller into the HW Compositing layer right from the start */
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
  }
  /*certain btn e*/
  /*scroll e*/

  /*contaienr s*/
  .Detail_Excahnge_contain {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    background-color: #fff;
  }
  /*container e*/

  /*Detail_header s*/
  .Detail_header {
    height: 1.75rem;
    line-height: 2.4;
    background-color: #fff;
    text-align: center;
    color: #9f5c2f;
    font-size: 0.8rem;
    font-weight: 600;
    position: relative;
    box-shadow: 0 2px 6px 2px #c7c2c2;
  }

  .Detail_goBack {
    width: 5.5%;
    position: absolute;
    left: 3%;
    top: 0.4rem;
  }

    .Detail_goBack img {
      width: 100%;
      display: block;
    }

  .top_nav_Scroll {
    width: 100%;
  }

  .div_middle {
    height: 1.75rem;
    line-height: 2.6;
    font-size: 0.75rem;
    color: #9f5c2f;
    background-color: #fff;
    //box-shadow: 0 2px 8px 2px rgba(128, 128, 128, 0.51);
  }

  .div_middle_left {
    float: left;
    padding-left: 5%;
  }

  .div_middle_right {
    float: right;
  }

  .fenhao_img {
    float: right;
    width: 6.4%;
    margin-top: 0.2rem;
    margin-right: 4%;
    margin-left: 4%;
  }

  .story_bottom {
    height: 12rem;
    margin-top: 0.2rem;
    overflow:scroll;
  }

  .story_title {
    height: 3rem;
  }
  /*Detail_header e*/

</style>
